<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item class="swiper-item" v-for="(item,index) in goodsInfo.pics" :key="index">
				<image class="swiper-image" :src="item.pics_big" mode="" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品详情 -->
		<view class="goods-info" v-if="goodsInfo.goods_name">
			<view class="goods-info-money">￥{{goodsInfo.goods_price}}</view>
			<view class="goods-info-main">
				<view class="goods-info-name">
					{{goodsInfo.goods_name}}
				</view>
				<view class="goods-info-star">
					<uni-icons type="star"></uni-icons>
					<view>收藏</view>
				</view>
			</view>
			<view class="goods-info-yunfei">快递：免运费</view>
			<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
			<view class="goods-nav">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="iconClick"
					@buttonClick="buttonClick"></uni-goods-nav>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsdetail
	} from "@/api/goods-detail.js"
	import {
		mapMutations,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				goodsInfo: [],
				options: [{
						icon: "shop",
						text: "商店"
					},
					{
						icon: "cart",
						text: "购物车",
						info: 2
					}
				],
				// 右侧
				buttonGroup: [{
						text: "加入购物车",
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: "立即购买",
						backgroundColor: 'orange',
						color: '#fff',
					}
				]
			}
		},
		onLoad(options) {
			this.getGoodsDetail(options.goods_id)
		},
		computed: {
			...mapGetters('cart_m', ['total'])
		},
		methods: {
			...mapMutations("cart_m", ["addToCart"]),
			async getGoodsDetail(goods_id) {
				const {
					data: res
				} = await goodsdetail(goods_id);
				console.log(res);
				if (res.meta.status !== 200) return uni.$showMag();
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img/g,
					'<img style="display:block;"').replace(/webp/g, 'jpg');
				this.goodsInfo = res.message;
				// console.log(this.goodsInfo.pics.pics_big)

			},
			preview(index) {
				// 图片预览
				uni.previewImage({
					current: index,
					urls: this.goodsInfo.pics.map(item => item.pics_big),
				})
			},
			iconClick(e) {
				console.log(e)
				if (e.content.text == "购物车") {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},


			buttonClick(e) {
				console.log(e);
				if (e.content.text == "加入购物车") {
					const goods = {
						goods_id: this.goodsInfo.goods_id,
						goods_name: this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_count: 1,
						goods_small_logo: this.goodsInfo.goods_small_logo,
						goods_state: true,
					}
					console.log(goods)
					this.addToCart(goods)

				}
			}
		},
		watch: {
			total: {
				handler(newValue) {
					console.log(newValue)
					const findResult = this.options.find(item => item.text == "购物车")
					if (findResult) {
						findResult.info = newValue
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 750rpx;

		.swiper-item {

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.goods-info {
		margin: 20rpx;

		.goods-info-money {
			color: red;
			line-height: 60rpx;
		}

		.goods-info-main {
			display: flex;
			font-size: 25rpx;
			height: 100rpx;

			.goods-info-name {}

			.goods-info-star {
				text-align: center;
				width: 30%;
				border-left: 1px solid #ccc;
			}
		}

		.goods-info-yunfei {
			color: #ccc;
			font-size: 25rpx;
		}

		.goods-nav {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
		}
	}
</style>
